<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/crm/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="/static/crm/lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
    <link rel="stylesheet" href="/static/crm/css/public.css" media="all">
</head>
<body>
      数据统计
      <div class="layuimini-container">
          <div class="layuimini-main">
              <div class="layui-row layui-col-space15">
                  <div class="layui-col-md8">
                      <div class="layui-row layui-col-space15">
                          <div class="layui-col-md6">
                              <div class="layui-card">
                                  <div class="layui-card-header"><i class="fa fa-warning icon"></i>数据统计</div>
                                  <div class="layui-card-body">
                                      <div class="welcome-module">
                                          <div class="layui-row layui-col-space10">
                                              <div class="layui-col-xs6">
                                                  <div class="panel layui-bg-number">
                                                      <div class="panel-body">
                                                          <div class="panel-title">
                                                              <span class="label pull-right layui-bg-blue">实时</span>
                                                              <h5>用户统计</h5>
                                                          </div>
                                                          <div class="panel-content">
                                                              <h1 class="no-margins">1111</h1>
                                                              <small>当前分类总记录数</small>
                                                          </div>
                                                      </div>
                                                  </div>
                                              </div>
                                              <div class="layui-col-xs6">
                                                  <div class="panel layui-bg-number">
                                                      <div class="panel-body">
                                                          <div class="panel-title">
                                                              <span class="label pull-right layui-bg-cyan">实时</span>
                                                              <h5>商品统计</h5>
                                                          </div>
                                                          <div class="panel-content">
                                                              <h1 class="no-margins">1234</h1>
                                                              <small>当前分类总记录数</small>
                                                          </div>
                                                      </div>
                                                  </div>
                                              </div>
                                              <div class="layui-col-xs6">
                                                  <div class="panel layui-bg-number">
                                                      <div class="panel-body">
                                                          <div class="panel-title">
                                                              <span class="label pull-right layui-bg-orange">实时</span>
                                                              <h5>浏览统计</h5>
                                                          </div>
                                                          <div class="panel-content">
                                                              <h1 class="no-margins">1234</h1>
                                                              <small>当前分类总记录数</small>
                                                          </div>
                                                      </div>
                                                  </div>
                                              </div>
                                              <div class="layui-col-xs6">
                                                  <div class="panel layui-bg-number">
                                                      <div class="panel-body">
                                                          <div class="panel-title">
                                                              <span class="label pull-right layui-bg-green">实时</span>
                                                              <h5>订单统计</h5>
                                                          </div>
                                                          <div class="panel-content">
                                                              <h1 class="no-margins">1234</h1>
                                                              <small>当前分类总记录数</small>
                                                          </div>
                                                      </div>
                                                  </div>
                                              </div>
                                          </div>
                                      </div>
                                  </div>
                              </div>
                          </div>
                      </div>
                  </div>
              </div>

                          </div>
                          <div class="layui-col-md12">
                              <div class="layui-card">
                                  <div class="layui-card-header"><i class="fa fa-line-chart icon"></i>报表统计</div>
                                  <div class="layui-card-body">
                                      <div id="echarts-records" style="width: 100%;min-height:500px"></div>
                                  </div>
                              </div>
                          </div>
                      </div>



      <script src="/static/crm/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
      <script src="/static/crm/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
      <script>
          layui.use(['layer','echarts'], function () {
              var $ = layui.jquery,
                  layer = layui.layer,

                  echarts = layui.echarts;


              /**
               * 报表功能
               */
              var echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden');
              var optionRecords = {
                  tooltip: {
                      trigger: 'axis'
                  },
                  legend: {
                      data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
                  },
                  grid: {
                      left: '3%',
                      right: '4%',
                      bottom: '3%',
                      containLabel: true
                  },
                  toolbox: {
                      feature: {
                          saveAsImage: {}
                      }
                  },
                  xAxis: {
                      type: 'category',
                      boundaryGap: false,
                      data: ['周一','周二','周三','周四','周五','周六','周日']
                  },
                  yAxis: {
                      type: 'value'
                  },
                  series: [
                      {
                          name:'邮件营销',
                          type:'line',
                          data:[120, 132, 101, 134, 90, 230, 210]
                      },
                      {
                          name:'联盟广告',
                          type:'line',
                          data:[220, 182, 191, 234, 290, 330, 310]
                      },
                      {
                          name:'视频广告',
                          type:'line',
                          data:[150, 232, 201, 154, 190, 330, 410]
                      },
                      {
                          name:'直接访问',
                          type:'line',
                          data:[320, 332, 301, 334, 390, 330, 320]
                      },
                      {
                          name:'搜索引擎',
                          type:'line',
                          data:[820, 932, 901, 934, 1290, 1330, 1320]
                      }
                  ]
              };
              echartsRecords.setOption(optionRecords);

              // echarts 窗口缩放自适应
              window.onresize = function(){
                  echartsRecords.resize();
              }

          });
      </script>
</body>
</html>